<template>
  <el-container>
    <el-aside>
      <el-button type="success" @click="dialogVisibleDir=!dialogVisibleDir">新建</el-button>
      <el-input
          v-model="query"
          placeholder="Please enter keyword"
          @input="onQueryChanged"
      />

      <el-tree :data="tableData" :props="props" :height="750">
        <template #default="{ node, data }">
          <div class="tree_operation">
            <el-icon><Folder /></el-icon>
            <span  @click="GetChildMeau(node)">{{ node.data.Name }}</span>

            <div class="tree_operation_list" >
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-icon class="morefilled"><MoreFilled /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item  @click.stop="CreateTree(node)">新建目录</el-dropdown-item>
                    <el-dropdown-item>新建工具</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                    <el-dropdown-item disabled>移动</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>

        </template>
      </el-tree>
    </el-aside>
    <el-main>
    </el-main>
  </el-container>

  <el-dialog v-model="dialogVisibleDir" title="新建目录" width="25%">
    <el-form :model="form" label-width="65px">
      <el-form-item label="目录名">
        <el-input v-model="form.name" :width="120"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="OnSubmit">创建</el-button>
      </span>
    </template>
  </el-dialog>


  <el-dialog v-model="dialogVisible" title="新建子目录" width="25%">
    <el-form :model="form" label-width="65px">
      <h3>当前目录：{{cur_father}}</h3>
      <el-divider border-style="dashed" />
      <el-form-item label="目录名">
        <el-input v-model="form.name" :width="120"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="OnSubmit">创建</el-button>
      </span>
    </template>
  </el-dialog>

</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElTreeV2} from 'element-plus'
import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
const tableData = ref([])

const cur_father = ref("")

const form = reactive({
  name: "",
  father:0,
})

const dialogVisible = ref(false)
const dialogVisibleDir = ref(false)
const query = ref('')
const treeRef = ref<InstanceType<typeof ElTreeV2>>()

const props = {
  value: 'ID',
  label: 'Name',
  children: 'Childs',
}

const getKey = (prefix: string, id: number) => {
  return `${prefix}-${id}`
}

onMounted(()=>{
  GetToolMeau(0)
})

const onQueryChanged = (query: string) => {
  // TODO: fix typing when refactor tree-v2
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  treeRef.value!.filter(query)
}
const filterMethod = (query: string, node: TreeNode) => {
  return node.label!.includes(query)
}

const CreateTree = (node) => {
  cur_father.value = node.label
  form.father = node.data.ID
  dialogVisible.value = true
}

const OnSubmit = () => {
  Toolmeau.Create(form).then((response)=>{
    ElMessage({
      type: 'success',
      message: response.data,
      showClose: true,
    })
  }).catch((error)=>{
    ElMessage({
      type: 'error',
      message: error,
      showClose: true,
    })
  })
  dialogVisible.value = false
  dialogVisibleDir.value = false

}

const GetToolMeau = (father_id) => {
  Toolmeau.List(father_id).then((response)=>{
    tableData.value = response.data
  }).catch((error)=>{
    ElMessage({
      type: 'error',
      message: error,
      showClose: true,
    })
  })
}

const GetChildMeau = (node) => {
  Toolmeau.List(node.data.ID).then((response)=>{
    node.data.Childs = response.data
    console.log(node)
  }).catch((error)=>{
    ElMessage({
      type: 'error',
      message: error,
      showClose: true,
    })
  })
}

</script>
<style lang="scss" scoped>
@import "@/styles/webkit.scss";

.el-aside .el-tree{
  height: 80%;
  max-height: 94%;
  width: 198px;
}
.el-aside {
  width: 200px;
  border-right: 1px solid #a9a4a4;
}
.tree_operation {
  width: 100%;
}

.tree_operation:hover .tree_operation_list{
  display: block;
  float: right;

}
.tree_operation .el-icon {
  margin-right: 3px;
}


.tree_operation_list {
  display: none;
  float: right;
}

.tree_operation_list:hover {
  background-color: #b0a9a9;
  border-radius: 10px;
  text-align: center;
}

.tree_operation_list > .el-dropdown {
  margin-left: 25px;
}


.tree_operation_list > .el-dropdown:first-child {
  margin-left: 15px;
  color:green;
  border: none;
}

.el-icon{
  border: none;
}

.morefilled:hover {
  border: none;
}
</style>